﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UIMapaForm.aspx.cs" Inherits="UILGestion.VentaAdmin.UIMapaForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
   
         <script type="text/javascript" src="../../Scripts/src/redist/when.js"></script>
<script type="text/javascript" src="../../Scripts/src/core.js"></script>
<script type="text/javascript" src="../../Scripts/src/graphics.js"></script>
<script type="text/javascript" src="../../Scripts/src/mapdata.js"></script>
<script type="text/javascript" src="../../Scripts/src/areadata.js"></script>
<script type="text/javascript" src="../../Scripts/src/areacorners.js"></script>
<script type="text/javascript" src="../../Scripts/src/scale.js"></script>
<script type="text/javascript" src="../../Scripts/src/tooltip.js"></script>
<script type="text/javascript">
    if (window.Zepto) {
        jQuery = Zepto;
        (function ($) {
            if ($) {
                $.fn.prop = $.fn.attr;
            }
        } (jQuery));
    }

    $(document).ready(function () {

        var $statelist, $usamap, ratio,
        mapsterConfigured = function () {
            // set html settings values
            var opts = $usamap.mapster('get_options', null, true);
            if (!ratio) {
                ratio = $usamap.width() / $usamap.height();
            }

        },
        default_options =
        {
            fillOpacity: 0.2,

            //render_zoom: {
            //    altImage: 'images/usa_map_huge.jpg'
            //},
            fadeInterval: 50,
            isSelectable: true,
            staticState: false,
            singleSelect: true,
            mapKey: 'name',
            mapValue: 'full',
            listSelectedAttribute: 'checked',
            sortList: "asc",
            onGetList: addCheckBoxes,

            onConfigured: mapsterConfigured,
            showToolTip: false,
            toolTipClose: ["area-mouseout"],
            areas: [

                { key: "Separado",
                    fillColor: 'FFCC00',
                    isSelectable: false,
                    staticState: true
                },
                { key: "Vendido",
                    fillColor: '008000',
                    isSelectable: false,
                    staticState: true
                },
                { key: "Disponible",
                    fillColor: 'ff000c',

                    staticState: true
                }
                ]
        };


        function addCheckBoxes(items) {
            var item, selected;
            $statelist.children().remove();
            for (var i = 0; i < items.length; i++) {
                selected = items[i].isSelected();
                item = $('<div><input type="checkbox" name="' + items[i].key + '"' + (selected ? "checked" : "") + '><span class="sel" key="' + items[i].key + '">' + items[i].value + '</span></div>');

                $statelist.append(item);
            }
            $statelist.find('span.sel').unbind('click').bind('click', function (e) {
                var key = $(this).attr('key');
                $usamap.mapster('highlight', true, key);
            });
            // return the list to mapster so it can bind to it
            return $statelist.find('input[type="checkbox"]').unbind('click').click(function (e) {
                var selected = $(this).is(':checked');
                $usamap.mapster('set', selected, $(this).attr('name'));
                styleCheckbox(selected, $(this));
            });
        }
        function styleCheckbox(selected, $checkbox) {
            nowWeight = selected ? "bold" : "normal";
            $checkbox.closest('div').css("font-weight", nowWeight);
        }

        $statelist = $('#statelist');
        $usamap = $('#mapa');
        $mapDepartamentos = $('#mapDepartamentos');

        function bindlinks() {
            $('*').unbind();
            $("#unbind_link").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster("unbind");
                $usamap.width(720);
                bindlinks();
            });
            $("#rebind_link").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster(default_options);
            });

            $("#unbind_link_preserve").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster("unbind", true);
                bindlinks();
            });
            $("#tooltip").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').showToolTip;
                $('#tooltip_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { showToolTip: state });
            });
            $("#show_selected").bind("click", function (e) {
                e.preventDefault();
                $('#selections').text($("#usa_image").mapster("get"));
            });
            $("#single_select").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').singleSelect;
                $('#single_select_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { singleSelect: state });
            });
            $("#is_deselectable").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').isDeselectable;
                $('#is_deselectable_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { isDeselectable: state });
            });
            function getSelected(sel) {
                var item = $();
                sel.each(function () {
                    if (this.selected) {
                        item = item.add(this);
                        return false;
                    }

                });
                return item;

            }

            function getFillOptions(el) {
                var new_options,
					val = getSelected($(el).find("option")).val();

                if (val > "0") {
                    new_options = {
                        altImage: 'images/usa_map_720_alt_' + val + '.jpg',
                        stroke: true
                    };
                } else {
                    new_options = {
                        altImage: null,
                        stroke: false
                    };
                }
                return new_options;
            }

            function getNewOptions() {
                var options,
                    render_highlight = getFillOptions($('#highlight_style')),
                    render_select = getFillOptions($('#select_style'));

                options = $.extend({},
                	default_options,
                	{
                	    render_select: render_select,
                	    render_highlight: render_highlight
                	});

                return options;

            }
            $("#highlight_style, #select_style").bind("change", function (e) {
                e.preventDefault();
                $statelist.children().remove();

                $usamap.mapster(getNewOptions());

            });
            $("#update").click(function (e) {
                var newOpts = {};
                function setOption(base, opt, value) {
                    if (value !== '' && value !== null) {
                        base[opt] = value;
                    }
                }
                e.preventDefault();

                newOpts.render_highlight = {};
                setOption(newOpts.render_highlight, "stroke", $('#stroke_highlight').prop("checked"));

                setOption(newOpts.render_highlight, "strokeWidth", $('#strokewidth_highlight').val());
                setOption(newOpts.render_highlight, "fillOpacity", $('#fill_highlight').val());
                setOption(newOpts.render_highlight, "strokeOpacity", $('#strokeopacity_highlight').val());

                newOpts.render_select = {};
                setOption(newOpts.render_select, "stroke", $('#stroke_select').prop("checked"));
                setOption(newOpts.render_select, "strokeWidth", $('#strokewidth_select').val());
                setOption(newOpts.render_select, "fillOpacity", $('#fill_select').val());
                setOption(newOpts.render_select, "strokeOpacity", $('#strokeopacity_select').val());

                var width = parseInt($('#img_width').val(), 10);

                if ($usamap.width() != width) {
                    $usamap.mapster('resize', width, null, 1000);
                } else {
                    $usamap.mapster('set_options', newOpts);
                }

            });

        };

        bindlinks();
        $.mapster.impl.init();
        $usamap.mapster(default_options);
        $mapDepartamentos.mapster(default_options);


    });


    // Utility functions
    // If you are copying code you probably won't need these.


    var utils = {};
    // Tells if an element is completely visible. if the 2nd parm is true, it only looks at the top.

    utils.isScrolledIntoView = function (elem, topOnly, container) {
        var useWindow = false, docViewTop, docViewBottom, elemTop, elemBottom;

        if (!container) {
            container = window;
            useWindow = true;
        }


        if (useWindow) {
            docViewTop = $(container).scrollTop();
            elemTop = elem.offset().top;
        } else {
            docViewTop = 0;
            elemTop = elem.position().top;
        }
        docViewBottom = docViewTop + $(container).height();
        elemBottom = elemTop + elem.height();


        if (topOnly) {
            return elemTop >= docViewTop && elemTop <= docViewBottom;
        } else {
            return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
        }
    };

    utils.centerOn = function ($container, $element) {
        $container.animate({
            scrollTop: $element.position().top - ($container.height() / 2)
        }, 'slow');
    };

</script>

</head>
<body>
    <form id="form1" runat="server">
    
    <table class="ui-accordion">
        <tr>
            <td>







               </td>
            <td>
            
                
            <img src="../Images/si_etapa3_001.png" name="map" width="732" height="356" border="0" class="map"  usemap="#mapa">

<map name="mapa">

<!--OI-->
<area shape="poly" TITLE="L-1" coords="132,229, 135,257, 167,249, 166,226, 132,229" name="Separado" href="#">
<area shape="poly" TITLE="L-2" coords="166,226, 198,223, 200,241, 167,249, 166,226" name="Vendido" href="#">
<area shape="poly" TITLE="L-3" coords="131,215, 164,212, 165,227, 132,229, 131,215" href="#">
<area shape="poly" TITLE="L-4" coords="163,212, 197,208, 199,223, 165,226, 163,212" href="#">
<area shape="poly" TITLE="L-5" coords="130,201,163,198,164,213,131,215,130,201" href="#">
<area shape="poly" TITLE="L-6" coords="163,198,196,194,197,209,165,212,163,198" href="#">
<area shape="poly" TITLE="L-7" coords="128,187,161,184,163,198,130,201,128,187" href="#">
<area shape="poly" TITLE="L-8" coords="160,183,193,179,194,194,162,197,160,183" href="#">
<area shape="poly" TITLE="L-9" coords="125,172,159,168,160,183,127,186,125,172" href="#">
<area shape="poly" TITLE="L-10" coords="158,169,191,166,192,180,160,184,158,169" href="#">
<area shape="poly" TITLE="L-11" coords="124,157,157,154,159,169,126,171,124,157" href="#">
<area shape="poly" TITLE="L-12" coords="157,154,190,151,191,165,159,169,157,154" href="#">
<area shape="poly" TITLE="L-13" coords="124,143,157,140,158,154,125,157,124,143" href="#">
<area shape="poly" TITLE="L-14" coords="155,140,188,136,189,151,157,154,155,140" href="#">
<area shape="poly" TITLE="L-15" coords="122,129,155,125,157,140,124,143,122,129" href="#">
<area shape="poly" TITLE="L-16" coords="154,127,187,123,188,138,156,141,154,127" href="#">
<area shape="poly" TITLE="L-17" coords="120,115,153,111,154,126,121,129,120,115" href="#">
<area shape="poly" TITLE="L-18" coords="153,112,186,108,187,122,155,126,153,112" href="#">
<area shape="poly" TITLE="L-19" coords="119,102, 152,98, 154,113, 121,116, 119,102" href="#">
<area shape="poly" TITLE="L-20" coords="152,98, 185,95, 186,109, 154,112, 152,98" href="#">
<area shape="poly" TITLE="L-21" coords="118,87, 150,84, 153,98, 119,102, 118,87" href="#">
<area shape="poly" TITLE="L-22" coords="150,84, 183,80, 185,94, 152,98, 150,84" href="#">
<area shape="poly" TITLE="L-23" coords="116,65, 148,62, 150,84, 118,87, 116,65" href="#">
<area shape="poly" TITLE="L-24" coords="182,59, 183,80, 151,83, 149,62, 182,59" href="#">

<!--NI-->
<area shape="poly" TITLE="L-1" coords="223,216,256,212,257,228,225,234,223,216" name="Separado" href="#">
<area shape="poly" TITLE="L-2" coords="255,199,288,195,290,221,258,228,255,199"  name="Separado" href="#">
<area shape="poly" TITLE="L-3" coords="222,201, 254,198, 255,212, 223,216, 222,201" href="#">
<area shape="poly" TITLE="L-4" coords="252,184, 286,180, 287,195, 254,199, 252,184" href="#">
<area shape="poly" TITLE="L-5" coords="220,187, 252,183, 254,198, 221,202, 220,187" href="#">
<area shape="poly" TITLE="L-6" coords="252,170, 285,166, 286,181, 253,184, 252,170" href="#">
<area shape="poly" TITLE="L-7" coords="219,173, 252,169, 253,184, 220,187, 219,173" href="#">
<area shape="poly" TITLE="L-8" coords="250,155, 283,152, 284,166, 251,170, 250,155" href="#">
<area shape="poly" TITLE="L-9" coords="217,158, 250,155, 251,169, 218,173, 217,158" href="#">
<area shape="poly" TITLE="L-10" coords="248,141, 281,137, 282,152, 249,155, 248,141" href="#">
<area shape="poly" TITLE="L-11" coords="215,144, 248,140, 249,155, 217,158, 215,144" href="#">
<area shape="poly" TITLE="L-12" coords="247,127, 280,123, 281,138, 248,141, 247,127" href="#">
<area shape="poly" TITLE="L-13" coords="214,130, 247,126, 248,141, 215,144, 214,130" href="#">
<area shape="poly" TITLE="L-14" coords="245,112, 278,108, 279,123, 247,127, 245,112" href="#">
<area shape="poly" TITLE="L-15" coords="212,115, 245,112, 246,126, 214,130, 212,115" href="#">
<area shape="poly" TITLE="L-16" coords="244,98, 276,95, 278,109, 245,112, 244,98" href="#">
<area shape="poly" TITLE="L-17" coords="211,102, 243,98, 245,112, 212,115, 211,102" href="#">
<area shape="poly" TITLE="L-18" coords="242,84, 275,80, 276,95, 243,98, 242,84" href="#">
<area shape="poly" TITLE="L-19" coords="210,88, 242,84, 244,98, 211,102, 210,88" href="#">
<area shape="poly" TITLE="L-20" coords="241,70, 273,66, 275,80, 242,84, 241,70" href="#">
<area shape="poly" TITLE="L-21" coords="208,73, 241,70, 242,84, 210,87, 208,73" href="#">
<area shape="poly" TITLE="L-22" coords="239,52, 272,49, 273,66, 241,70, 239,52" href="#">
<area shape="poly" TITLE="L-23" coords="207,56, 239,52, 241,70, 208,73, 207,56" href="#">

<!--LI-->

<area shape="poly" TITLE="L-1" coords="313,191, 345,187, 347,206, 315,213, 313,191" href="#">
<area shape="poly" TITLE="L-2" coords="345,188, 378,184, 379,202, 347,206, 345,188" href="#">
<area shape="poly" TITLE="L-3" coords="311,177, 344,173, 345,188, 312,192, 311,177" href="#">
<area shape="poly" TITLE="L-4" coords="343,174, 376,170, 377,184, 345,188, 343,174" href="#">
<area shape="poly" TITLE="L-5" coords="310,163, 342,159, 344,174, 311,178, 310,163" href="#">
<area shape="poly" TITLE="L-6" coords="342,160, 375,156, 376,170, 344,174, 342,160" href="#">
<area shape="poly" TITLE="L-7" coords="308,149, 341,145, 342,160, 309,164, 308,149" href="#">
<area shape="poly" TITLE="L-8" coords="340,145, 373,142, 374,156, 342,160, 340,145" href="#">
<area shape="poly" TITLE="L-9" coords="307,135, 339,131, 340,146, 308,150, 307,135" href="#">
<area shape="poly" TITLE="L-10" coords="339,131, 372,128, 373,142, 340,146, 339,131" href="#">
<area shape="poly" TITLE="L-11" coords="305,121, 337,117, 338,132, 306,135, 305,121" href="#">
<area shape="poly" TITLE="L-12" coords="337,117, 370,113, 371,128, 338,132, 337,117" href="#">
<area shape="poly" TITLE="L-13" coords="303,107, 336,103, 337,118, 305,121, 303,107" href="#">
<area shape="poly" TITLE="L-14" coords="336,103, 369,99, 370,114, 337,117, 336,103" href="#">
<area shape="poly" TITLE="L-15" coords="302,93, 334,89, 336,104, 303,107, 302,93" href="#">
<area shape="poly" TITLE="L-16" coords="334,89, 367,85, 368,100, 336,104, 334,89" href="#">
<area shape="poly" TITLE="L-17" coords="300,78, 333,74, 334,89, 302,93, 300,78" href="#">
<area shape="poly" TITLE="L-18" coords="333,75, 365,71, 367,85, 334,89, 333,75" href="#">
<area shape="poly" TITLE="L-19" coords="299,64, 332,60, 333,75, 300,78, 299,64" href="#">
<area shape="poly" TITLE="L-20" coords="332,60, 364,56, 366,71, 333,75, 332,60" href="#">
<area shape="poly" TITLE="L-21" coords="297,46, 330,43, 331,60, 299,64, 297,46" href="#">
<area shape="poly" TITLE="L-22" coords="330,42, 362,39, 364,57, 331,60, 330,42" href="#">

<!--EI-->
<area shape="poly" TITLE="L-1" coords="392,69, 409,68, 412,101, 395,103, 392,69" href="#">
<area shape="poly" TITLE="L-2" coords="388,37, 405,35, 408,68, 391,70, 388,37" href="#">
<area shape="poly" TITLE="L-3" coords="408,68, 423,66, 427,98, 411,101, 408,68" href="#">
<area shape="poly" TITLE="L-4" coords="405,35, 420,34, 423,66, 408,68, 405,35" href="#">
<area shape="poly" TITLE="L-5" coords="423,66, 437,65, 440,98, 426,99, 423,66" href="#">
<area shape="poly" TITLE="L-6" coords="420,33, 434,32, 437,65, 423,66, 420,33" href="#">
<area shape="poly" TITLE="L--7" coords="437,65, 452,64, 454,97, 440,98, 437,65" href="#">
<area shape="poly" TITLE="L-8" coords="434,32, 448,31, 451,64, 437,65, 434,32" href="#">
<area shape="poly" TITLE="L-9" coords="451,64, 466,62, 468,95, 454,96, 451,64" href="#">
<area shape="poly" TITLE="L-10" coords="448,31, 462,29, 465,62, 451,63, 448,31" href="#">
<area shape="poly" TITLE="L-11" coords="466,62, 480,61, 483,94, 469,95, 466,62" href="#">
<area shape="poly" TITLE="L-12" coords="462,29, 477,28, 480,61, 466,62, 462,29" href="#">
<area shape="poly" TITLE="L-13" coords="480,60, 495,59, 497,92, 483,93, 480,60" href="#">
<area shape="poly" TITLE="L-14" coords="477,27, 491,26, 494,59, 480,60, 477,27" href="#">
<area shape="poly" TITLE="L-15" coords="495,59, 509,57, 512,90, 498,91, 495,59" href="#">
<area shape="poly" TITLE="L-16" coords="491,26, 506,25, 508,57, 494,58, 491,26" href="#">
<area shape="poly" TITLE="L-17" coords="509,57, 523,56, 526,89, 512,90, 509,57" href="#">
<area shape="poly" TITLE="L-18" coords="505,24, 520,23, 522,56, 509,57, 505,24" href="#">
<area shape="poly" TITLE="L-19" coords="523,55, 537,54, 540,87, 526,88, 523,55" href="#">
<area shape="poly" TITLE="L-20" coords="519,23, 534,21, 537,54, 523,55, 519,23" href="#">
<area shape="poly" TITLE="L-21" coords="537,54, 552,53, 555,86, 541,87, 537,54" href="#">
<area shape="poly" TITLE="L-22" coords="534,22, 549,20, 551,53, 537,54, 534,22" href="#">
<area shape="poly" TITLE="L-23" coords="552,53, 566,51, 569,84, 555,86, 552,53" href="#">
<area shape="poly" TITLE="L-24" coords="548,20, 563,19, 566,52, 552,53, 548,20" href="#">
<area shape="poly" TITLE="L-25" coords="566,51, 595,48, 595,81, 570,84, 566,51" href="#">
<area shape="poly" TITLE="L-26" coords="562,18, 577,16, 579,49, 565,50, 562,18" href="#">
<area shape="poly" TITLE="L-27" coords="577,17, 595,15, 594,48, 580,49, 577,17" href="#">
<!--DI-->
<area shape="poly" TITLE="L-1" coords="401,163, 418,161, 422,197, 404,199, 401,163" href="#">
<area shape="poly" TITLE="L-2" coords="397,127, 415,126, 418,161, 401,163, 397,127" href="#">
<area shape="poly" TITLE="L-3" coords="418,161, 433,159, 436,195, 421,197, 418,161" href="#">
<area shape="poly" TITLE="L-4" coords="415,125, 430,124, 433,159, 418,161, 415,125" href="#">
<area shape="poly" TITLE="L-5" coords="432,159, 447,157, 450,193, 435,194, 432,159" href="#">
<area shape="poly" TITLE="L-6" coords="430,124, 443,122, 446,157, 432,159, 430,124" href="#">
<area shape="poly" TITLE="L-7" coords="446,157, 461,155, 464,191, 450,192, 446,157" href="#">
<area shape="poly" TITLE="L-8" coords="443,122, 457,120, 461,156, 446,157, 443,122" href="#">
<area shape="poly" TITLE="L-9" coords="460,156, 475,154, 478,190, 464,191, 460,156" href="#">
<area shape="poly" TITLE="L-10" coords="458,121, 472,120, 475,155, 460,157, 458,121" href="#">
<area shape="poly" TITLE="L-11" coords="475,154, 490,153, 493,187, 478,189, 475,154" href="#">
<area shape="poly" TITLE="L-12" coords="472,120, 486,118, 489,153, 474,155, 472,120" href="#">
<area shape="poly" TITLE="L-13" coords="489,153, 504,152, 507,186, 492,187, 489,153" href="#">
<area shape="poly" TITLE="L-14" coords="486,118, 500,117, 503,152, 488,154, 486,118" href="#">
<area shape="poly" TITLE="L-15" coords="504,151, 518,149, 521,184, 507,185, 504,151" href="#">
<area shape="poly" TITLE="L-16" coords="500,116, 514,115, 517,150, 502,152, 500,116" href="#">
<area shape="poly" TITLE="L-17" coords="518,150, 533,148, 536,182, 522,184, 518,150" href="#">
<area shape="poly" TITLE="L-18" coords="515,115, 529,113, 532,149, 517,150, 515,115" href="#">
<area shape="poly" TITLE="L-19" coords="533,148, 548,146, 550,181, 536,182, 533,148" href="#">
<area shape="poly" TITLE="L-20" coords="530,113, 544,112, 547,147, 532,149, 530,113" href="#">
<area shape="poly" TITLE="L-21" coords="547,146, 562,144, 565,178, 551,180, 547,146" href="#">
<area shape="poly" TITLE="L-22" coords="544,111, 558,111, 561,144, 546,145, 544,111" href="#">
<area shape="poly" TITLE="L-23" coords="561,144,576,141,579,176,565,178,561,144" href="#">
<area shape="poly" TITLE="L-24" coords="557,110, 571,109, 575,142, 560,144, 557,110" href="#">
<area shape="poly" TITLE="L-25" coords="576,143, 594,140, 593,174, 579,176, 576,143" href="#">
<area shape="poly" TITLE="L-26" coords="572,109, 594,107, 595,140, 574,143, 572,109" href="#">
<!--BI-->
<area shape="poly" TITLE="L-1" coords="652,142, 652,165, 619,170, 619,142, 652,142" href="#">
<area shape="poly" TITLE="L-2" coords="697,142, 696,160, 652,165, 652,142, 697,142" href="#">
<area shape="poly" TITLE="L-3" coords="652,127, 652,142, 619,142, 619,127, 652,127" href="#">
<area shape="poly" TITLE="L-4" coords="697,128, 697,143, 652,143, 652,128, 697,128" href="#">
<area shape="poly" TITLE="L-5" coords="652,114, 652,128, 619,128, 619,114, 652,114" href="#">
<area shape="poly" TITLE="L-6" coords="697,114, 697,128, 652,128, 652,114, 697,114" href="#">
<area shape="poly" TITLE="L-7" coords="652,99, 652,114, 619,114, 619,99, 652,99" href="#">
<area shape="poly" TITLE="L-8" coords="697,100, 697,114, 652,114, 652,100, 697,100" href="#">
<area shape="poly" TITLE="L-9" coords="652,84, 652,99, 619,99, 619,84, 652,84" href="#">
<area shape="poly" TITLE="L-10" coords="697,85, 697,99, 652,99, 652,85, 697,85" href="#">
<area shape="poly" TITLE="L-11" coords="652,70, 652,84, 619,84, 619,70, 652,70" href="#">
<area shape="poly" TITLE="L-12" coords="697,71, 697,85, 652,85, 652,71, 697,71" href="#">
<area shape="poly" TITLE="L-13" coords="652,56, 652,71, 619,71, 619,56, 652,56" href="#">
<area shape="poly" TITLE="L-14" coords="697,57, 697,71, 652,71, 652,57, 697,57" href="#">
<area shape="poly" TITLE="L-15" coords="652,42, 652,56, 619,56, 619,42, 652,42" href="#">
<area shape="poly" TITLE="L-16" coords="697,42, 697,57, 652,57, 652,42, 697,42" href="#">
<area shape="poly" TITLE="L-17" coords="652,27, 652,42, 619,42, 619,27, 652,27" href="#">
<area shape="poly" TITLE="L-18" coords="697,27, 697,42, 652,42, 652,27, 697,27" href="#">
<area shape="poly" TITLE="L-19" coords="652,11, 652,27, 619,27, 619,11, 652,11" href="#">
<area shape="poly" TITLE="L-20" coords="696,11, 696,27, 652,27, 652,11, 696,11" href="#">

<!--YI-->
<area shape="poly" TITLE="L-1" coords="619,195, 633,193, 638,226, 619,228, 619,195" href="#">
<area shape="poly" TITLE="L-2" coords="648,191, 652,224, 638,226, 633,193, 648,191" href="#">
<area shape="poly" TITLE="L-3" coords="662,189, 666,222, 652,224, 648,191, 662,189" href="#">
<area shape="poly" TITLE="L-4" coords="676,187, 680,220, 666,222, 662,189, 676,187" href="#">
<area shape="poly" TITLE="L-5" coords="697,185, 696,217, 680,220, 676,187, 697,185" href="#">

<!--PI-->
<area shape="poly" TITLE="L-1" coords="138,282,152,278,160,310,142,315,138,282" href="#">
<area shape="poly" TITLE="L-2" coords="152,278, 166,275, 174,307, 160,310, 152,278" href="#">
<area shape="poly" TITLE="L-3" coords="166,275, 180,271, 188,303, 174,307, 166,275" href="#">
<area shape="poly" TITLE="L-4" coords="180,271, 194,268, 202,300, 188,303, 180,271" href="#">
<area shape="poly" TITLE="L-5" coords="194,268, 208,264, 216,297, 202,300, 194,268" href="#">
<area shape="poly" TITLE="L-6" coords="208,264, 222,261, 230,293, 216,297, 208,264" href="#">
<area shape="poly" TITLE="L-7" coords="222,261, 236,258, 244,290, 230,293, 222,261" href="#">
<area shape="poly" TITLE="L-8" coords="236,258, 250,254, 257,286, 244,290, 236,258" href="#">
<area shape="poly" TITLE="L-9" coords="249,254, 263,250, 271,282, 257,286, 249,254" href="#">
<area shape="poly" TITLE="L-10" coords="264,251, 277,247, 285,279, 271,283, 264,251" href="#">
<area shape="poly" TITLE="L-11" coords="277,247, 291,244, 299,276, 285,279, 277,247" href="#">
<area shape="poly" TITLE="L-12" coords="291,244, 305,241, 313,273, 299,276, 291,244" href="#">
<area shape="poly" TITLE="L-13" coords="305,241, 319,238, 327,270, 313,273, 305,241" href="#">
<area shape="poly" TITLE="L-14" coords="319,237, 333,234, 341,266, 327,269, 319,237" href="#">
<area shape="poly" TITLE="L-15" coords="333,233, 346,231, 354,230, 360,262, 342,265, 333,233" href="#">
<area shape="poly" TITLE="L-16" coords="369,228, 373,260, 360,262, 354,230, 369,228" href="#">
<area shape="poly" TITLE="L-17" coords="382,226, 387,259, 373,261, 368,228, 382,226" href="#">

<!--CI-->
<area shape="poly" TITLE="L-1" coords="408,223, 428,220, 432,253, 412,255, 408,223" href="#">
<area shape="poly" TITLE="L-2" coords="442,218, 446,251, 432,253, 428,220, 442,218" href="#">
<area shape="poly" TITLE="L-3" coords="456,216, 461,249, 446,251, 442,218, 456,216" href="#">
<area shape="poly" TITLE="L-4" coords="470,214, 475,247, 461,249, 456,216, 470,214" href="#">
<area shape="poly" TITLE="L-5" coords="485,212, 489,245, 475,247, 470,214, 485,212" href="#">
<area shape="poly" TITLE="L-6" coords="499,210, 503,243, 489,245, 485,212, 499,210" href="#">
<area shape="poly" TITLE="L-7" coords="513,208, 517,241, 503,243, 499,210, 513,208" href="#">
<area shape="poly" TITLE="L-8" coords="527,207, 532,240, 517,241, 513,209, 527,207" href="#">
<area shape="poly" TITLE="L-9" coords="542,205, 546,238, 532,240, 527,207, 542,205" href="#">
<area shape="poly" TITLE="L-10" coords="556,203, 560,235, 546,237, 542,204, 556,203" href="#">
<area shape="poly" TITLE="L-11" coords="570,201, 574,233, 560,235, 556,203, 570,201" href="#">
<area shape="poly" TITLE="L-12" coords="594,198, 594,231, 574,234, 570,201, 594,198" href="#">


</map>
            
            </td>
        </tr>
    </table>
    
    </form>
</body>
</html>
